<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>获取元素</title>
  <style>
    .container {
      width: 200px;
      height: 200px;
      background-color: red;
    }

    body {
      /* cover属性,可以将背景图片铺满屏幕 */
      background: url('./img/desktop_1.jpg') no-repeat top center/cover;
    }
  </style>
</head>

<body>
  <div class="box">123</div>
  <div id="box">123</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <div class="container"></div>
  <script>
    console.log('=====获取元素=====');
    const div1 = document.querySelector('.box')
    const div2 = document.querySelector('#box')
    const li = document.querySelector('ul li:first-child')
    console.log(div1);   //得到的是一个对象
    console.log(div2);   //得到的是一个对象
    console.log(li);    //得到的是一个对象

    const lis = document.querySelectorAll('ul li')
    console.log(lis);    //得到的是一个伪数组  有数组的长度,索引号,但是没有数组的方法
    for (let i = 0; i < lis.length; i++) {
      console.log(lis[i]);
      lis[i].style.color = 'red'
    }
    console.log('=====修改元素内容innerText=====');
    div1.innerText = 'innerText'
    console.log('=====修改元素内容innerHTML=====');
    div2.innerHTML = 'innerHtml'
    // innerText和innerHTML区别
    // 1.innerText显示纯文本,不解析标签
    // 2.innerHtml可以解析标签
    console.log('=====修改style样式属性=====');
    const container = document.querySelector('.container')
    container.style.width = '300px'
    // 多组单词的采取 小驼峰命名法
    container.style.backgroundColor = 'pink'

    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    const random = getRandom(1, 10)
    document.body.style.backgroundImage = `url(./img/desktop_${random}.jpg)`
  </script>
</body>

</html>